<template>
  <yd-layout class="m-forget">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="找回密码" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <div class="m-forget-ct">
      <div class="logo"></div>
      <div class="forget-bd">
        <yd-cell-group>
          <yd-cell-item>
            <yd-input slot="right"
              type="text" 
              v-model="userName" 
              placeholder="请输入手机号"
              :required="true"
              regex="mobile"
              ref="forgetInput"
              :showClearIcon="false"
              :showErrorIcon="false"
              :showSuccessIcon="false"
              :showRequiredIcon="false">
            </yd-input>
          </yd-cell-item>
        </yd-cell-group>

        <yd-button size="large" @click.native="onSubmit">下一步</yd-button>
      </div>
    </div>
  </yd-layout>
</template>

<script>
  import { session } from 'util/storage'

  export default {
    data() {
      return {
        userName: ''
      }
    },
    created() {
      this.userName = session.get('userName') || ''
    },
    mounted() {
      this.$refs.forgetInput.$el.children[0].focus()
    },
    methods: {
      onSubmit() {
        const oInput = this.$refs.forgetInput
        const _this = this
        if (oInput.errorMsg) {
          this.$toast(oInput.errorMsg, () => {
            oInput.$el.children[0].focus()
          })
        }
        // 成功
        session.set('userName', this.userName)
        this.$store.dispatch('fetchIsUserName', {
          userName: this.userName,
          callback(data) {
            if (data.code == '200') {
              _this.$toast('该手机号未注册', () => {
                _this.$router.replace('/register')
              })
            } else {
              // 用户存在
              _this.$router.push('/forget/next')
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .m-forget {
    a {
      font-size: .26rem;
      color: #666;
    }
  }
  .m-forget-ct {
    height: 100%;
    padding-top: .9rem;
    background: #fff;
    .logo {
      height: 1rem;
      margin-bottom: 1.1rem;
      // background: url(../../assets/logo.png) no-repeat center center;
      background-size: 2.6rem 100%;
    }
    .forget-bd {
      padding: 0 .8rem;
      .protocol {
        line-height: .6rem;
        text-align: center;
        a {
          color: #0287fd;
        }
      }
    }
  }
</style>